<template>
	<div class="datavMap" ref="datavMap">
		地图
	</div>
</template>
<script setup>
	import * as echarts from "echarts"
	// import "echarts-gl"; //3D地图插件
	import {
		ref,
		onMounted
	} from "vue"
	import chinaJson from '../../../../utils/z_china.json';
	import tianjinJson from '../../../../utils/z_tianjin.json';
	let datavMap = ref()
	let options = {
		series: [{
			type: 'map',

			roam: true, //缩放属性 加上他就可以 放大缩小 拖拽
			map: 'china',
			boxWidth: 500,
			boxHeight: 500,
			boxDepth: 30,
			width: 500,
			height: 600,

			// 配置为全景贴图
			environment: 'auto',
			label: { // 是否展示提示 文字 （城市名称）
				show: true,
				textStyle: { //提示的字体颜色
					color: "#000"
				}
			},
			// groundPlane:{
			// 	show:true,
			// 	color :'#aaa'
			// },
			itemStyle: {
				color: '#d7fadb',
				borderWidth: 1, //图形描边的宽度。加上描边后可以更清晰的区分每个区域。如下图：
				borderColor: "#810378" //边框颜色
			},
			emphasis: {
				label: {
					show: true,

					textStyle: { //鼠标放上来的字体颜色
						color: "#d7fadb",

						borderWidth: 2, //提示文字的边框 
						borderColor: "#e31414" //提示文字的边框颜色
					}
				}
			},
			data: [{
					name: "新疆维吾尔自治区",
					value: 7000,
					regionHeight: 7,
					itemStyle: {
						color: "#e31414",
						borderWidth: 2,
						borderColor: "#e31414"
					}
				},
				{
					name: "河北省",
					value: 5000,
					regionHeight: 5,
					itemStyle: {
						borderWidth: 2,
						borderColor: "#e31414"
					}
				}
			]

		}],
		geo3D: [{
			show: true,
			roam: true,
			boxWidth: 500,

			boxHeight: 50,
			boxDepth: 10,
		}]
	}
	onMounted(() => {
		var chart = echarts.init(datavMap.value);
		echarts.registerMap('china', chinaJson);
		chart.setOption(options);
		chart.on('click', function(params) {
			console.log(params.name);
			if (params.name === "天津市") {
				echarts.registerMap('tianjin', tianjinJson);
				// var chart = echarts.init(datavMap.value);
				options.series[0].map = "tianjin"
				chart.setOption(options);
			}

		});
	})
	
	//  a={a:1,b:2,c:3}  b={c:2,f:1}  c={...a,...b} == {a:1,b:2,c:2,f:1} 
	// let params = {
	// 	a: 1,
	// 	b: 2,
	// 	c: 3
	// }
	// 	let searchObj, searchStr;
	// 	// 1 读取本地存储
		// // searchStr = localStorage.getItem(this.$route.meta.id + "Search")
		// // if (!searchStr) {
		// // 	localStorage.setItem(this.$route.meta.id + "Search", JSON.stringify(params))
		// // } else {
		// 	searchObj = JSON.parse(searchStr)
	// 		// 如果本地存储是空的 
	// 		if(Object.keys(searchObj).length === 0){
	// 			// 设置初试值 是 this.queryparams
	// 			searchObj = deepMerge({},this.queryParams)
	// 		}else{
	// 			// 如果不是 先把 参数和本地存储合并 
	// 			searchObj = {...this.queryparams,...this.白名单,...params}
	// 			this.queryparams =searchObj
	// 			localStorage.setItem(this.$route.meta.id + "Search", JSON.stringify(searchObj))
	// // 		}
	// // 		// 2.遍历对象 一个值一个值进行更新
	// 		//if(Object.keys(params).length != 0)
	// // 		for (var k in searchObj) {
	// // 			if (params[k] != searchObj[k]) {
	// // 				// 如果不相等就做下处理 只做一次
	// // 				searchObj[k] = params[k]
	// // 				localStorage.setItem(this.$route.meta.id + "Search", JSON.stringify(searchObj))
	// // 				break;
	// // 			}

	// // 		}
		// }
</script>
<style scoped>
	.datavMap {
		margin-left: 31vw;
		width: 30%;
		height: 90%;
	}
</style>